<template>
  <a-modal
    title="预览图片"
    :footer="null"
    :width="900"
    :visible="visible"
    @cancel="handleCancel"
  >
    <a-spin :spinning="divLoading">
      <div style="text-align: center">
        <img :src ="src" style="max-width: 99%">
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
  import { sysFileInfoPreview} from '@/api/modular/system/fileManage'
  export default {
    data () {
      return {
        visible: false,
        src:'',
        divLoading: false,
      }
    },
    methods: {
      /**
       * 初始化
       */
      preview (record) {
        this.visible = true
        this.divLoading = true
        this.sysFileInfoPreview(record)
      },
      /**
       * 获取图片并转为链接
       */
      sysFileInfoPreview(record){
        sysFileInfoPreview({id:record.id}).then((res)=>{
          this.divLoading = false
          this.downloadfile(res)
        }).catch((err)=>{
          this.divLoading = false
          this.$message.error('预览错误：'+err.message)
        })
      },
      /**
       * 转图片类型
       */
      downloadfile(res) {
        let blob = new Blob([res]);
        this.src  = window.URL.createObjectURL(blob);
      },
      handleCancel () {
        this.src=''
        this.visible = false
      }
    }
  }
</script>
